<template>
  <div class="demo">
    <div class="demo-title">固定 Label 宽度</div>
    <div class="demo-content">
      <Form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
        <Form.Item label="Activity name">
          <Input v-model:value="formState.name" />
        </Form.Item>
        <Form.Item label="Instant delivery">
          <Switch v-model:checked="formState.delivery" />
        </Form.Item>
        <Form.Item label="Activity type">
          <Checkbox.Group v-model:value="formState.type">
            <Checkbox value="1" name="type">Online</Checkbox>
            <Checkbox value="2" name="type">Promotion</Checkbox>
            <Checkbox value="3" name="type">Offline</Checkbox>
          </Checkbox.Group>
        </Form.Item>
        <Form.Item label="Resources">
          <Radio.Group v-model:value="formState.resource">
            <Radio value="1">Sponsor</Radio>
            <Radio value="2">Venue</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="Activity form">
          <Input v-model:value="formState.desc" type="textarea" />
        </Form.Item>
        <Form.Item :wrapper-col="{ span: 14, offset: 4 }">
          <Button type="primary" @click="onSubmit">Create</Button>
          <Button style="margin-left: 10px">Cancel</Button>
        </Form.Item>
      </Form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, toRaw } from 'vue';
  import type { UnwrapRef } from 'vue';
  import Button from '@sscd/button';
  import Checkbox from '@sscd/checkbox';
  import Input from '@sscd/input';
  import Radio from '@sscd/radio';
  import Switch from '@sscd/switch';
  import Form from '@sscd/form';
  interface FormState {
    name: string;
    delivery: boolean;
    type: string[];
    resource: string;
    desc: string;
  }
  const labelCol = { style: { width: '150px' } };
  const wrapperCol = { span: 14 };
  const formState: UnwrapRef<FormState> = reactive({
    name: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  });
  const onSubmit = () => {
    console.log('submit!', toRaw(formState));
  };
</script>
